<template>
	<div id="ranking"></div>
</template>

<script>
	export default {
		data() {
			return {
				candy: '',
				chartData: [{
						name: '衣服',
						value: 523,
						test: '天猫旗舰店' //自定义参数
					},
					{
						name: '鞋',
						value: 134,
						test: '天猫旗舰店' //自定义参数
					},
					{
						name: '袄子',
						value: 562,
						test: '天猫旗舰店' //自定义参数
					},
					{
						name: '纸巾',
						value: 162,
						test: '天猫旗舰店' //自定义参数
					},
					{
						name: '电视机',
						value: 100,
						test: '天猫旗舰店' //自定义参数
					},
				]
			}
		},
		mounted() {
			this.draw();
		},
		methods: {
			draw() {
				this.ranking = this.$echarts.init(document.getElementById('ranking'));
				this.ranking.setOption({
					title: {
						show: false
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						padding: 0,
						textStyle: {
							fontSize: 16,
							fontFamily: 'Simsun',
							color: '#fff'
						},
						formatter: function(params, ticket, callback) {
							console.log(params)
							var res = '<table class="charts_tip">' +
								'<thead>' +
								'<tr><th colspan="2" style="padding:2px 5px; background:' + params[1].color + '">' + params[1].name +
								'</th></tr>' +
								'</thead>' +
								'<tbody>' +
								'<tr><td class="cc" style="padding:2px 5px;">数量</td><td>' + params[1].value + '</td></tr>' +
								'<tr><td class="cc" style="padding:2px 5px;">商家</td><td>' + params[1].data.test + '</td></tr>' +
								'</tbody>' +
								'</table>';
							return res;
						}
					},
					legend: {
						show: false
					},
					toolbox: {
						show: false
					},
					grid: {
						top: '8%',
						left: '7%',
						right: '15%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: [{
						type: 'value',
						position: 'bottom',
						boundaryGap: true, // 边界间隙
						min: 0,
						axisLabel: {
							show: false,
							textStyle: {
								color: '#fff',
								fontSize: 16
							}
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(255, 255, 255, .5)'
							}
						},
						axisTick: {
							show: false // 坐标轴小标记
						},
						splitLine: {
							show: false, // 是否显示分割线
							lineStyle: {
								color: 'rgba(255, 255, 9255, 0)', // 纵向向网格线颜色
								type: 'dashed',
								width: 1
							}
						}
					}],
					yAxis: {
						type: 'category',
						position: 'left',
						axisLabel: {
							textStyle: {
								color: '#8aa5ab',
								fontSize: 15
							}
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, .5)',
								width: 1
							}
						},
						axisTick: {
							show: false // 坐标轴小标记
						},
						splitLine: {
							show: false
						},
						data: (function(data) {
							var arr = [];
							data.forEach(function(items) {
								arr.push(items.name);
							});
							return arr;
						})(this.chartData) // 载入y轴数据
					},
					series: [{
						type: 'bar',
						barGap: "-100%",
						label: {
							normal: {
								show: false
							}
						},
						barWidth: 20,
						data: ['#ea9ef3', 'yellowgreen', '#4a5eea', '#00a0e9', '#8957a1', '#80f1b0', '#ff6692',
							'#f29b76'
						],
						z: 0
					}, {
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'right', // top, right, inside, insideTop,...
								textStyle: {
									color: ['#ea9ef3', 'yellowgreen', '#4a5eea', '#00a0e9', '#8957a1', '#80f1b0', '#ff6692',
										'#f29b76'
									],
									fontSize: 16
								},
								formatter: '{c}'
							}
						},
						barWidth: 20,
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = ['#ea9ef3', 'yellowgreen', '#4a5eea', '#00a0e9', '#8957a1', '#80f1b0', '#ff6692',
										'#f29b76'
									];
									return colorList[params.dataIndex]
								},
								barBorderRadius: [0, 10, 10, 0] //圆角
							}
						},
						data: this.chartData, // 载入数据(内含自定义参数)
						z: 1
					}]
				})
			}
		}
	}
</script>

<style scoped>
	#ranking {
		width: 100%;
		height: 100%;
	}
</style>
